<template>
  <div>
    <van-swipe
      indicator-color="white"
      style="height: 180px"
      class="my-swipe"
      :autoplay="3000"
    >
      <van-swipe-item v-for="image in images" :key="image.id">
        <img v-lazy="image.imgSrc" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { chart } from '@/api/index'
export default {
  name: 'chart-page',
  async created() {
    const res = await chart()
    // console.log(res.data.body) // 拿到数据
    // 把数据给到data

    // console.log(this.images.imgSrc)
    res.data.body = res.data.body.map((item) => {
      item.imgSrc = 'http://liufusong.top:8080' + item.imgSrc
      return item
    })
    this.images = res.data.body
    // console.log(this.images) // 3个对象的数据，有id
    // window.localStorage.setItem('images', JSON.stringify(this.images))
  },
  data() {
    return {
      images: []
    }
  },
  methods: {}
}
</script>

<style scoped lang="less">
van-swipe {
  height: 50px;
  background-color: red;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
  }
}
</style>
